<template>
  <div>
    <!-- 策略筛选器 -->
    <div style="margin-bottom: 20px;">
      <label style="color: #adb5bd">翻译策略筛选：</label>
      <select v-model="filterTechnique">
        <option value="" >全部</option>
        <option value="直译">直译</option>
        <option value="意译">意译</option>
      </select>
    </div>

    <!-- 卡片展示句子 -->
    <div class="card-container">
      <div class="card" v-for="s in filteredSentences" :key="s.id">
        <p><strong>英文原句:</strong> {{ s.original_text }}</p>
        <p><strong>中文翻译:</strong> {{ s.translation }}</p>
        <p><strong>英文语法结构:</strong> {{ s.analysis.syntax.english.join(', ') }}</p>
        <p><strong>中文语法结构:</strong> {{ s.analysis.syntax.chinese.join(', ') }}</p>
        <p><strong>翻译策略:</strong> {{ s.analysis.techniques.join(', ') }}</p>
      </div>
    </div>

    <!-- Echarts 图表区域 -->
    <div ref="chart" style="width: 100%; height: 400px; margin-top: 40px;"></div>
  </div>
</template>

<script>
import axios from 'axios'
import * as echarts from 'echarts'

export default {
  name: 'TranslationAnalysis',
  data () {
    return {
      rawData: [],
      filterTechnique: ''
    }
  },
  computed: {
    allSentences () {
      return this.rawData.reduce((acc, item) => acc.concat(item.sentences), [])
    },
    // 选取典型句子：每种策略取3句
    filteredSentences () {
      const direct = this.allSentences.filter(s => s.analysis.techniques.includes('直译')).slice(0, 3)
      const free = this.allSentences.filter(s => s.analysis.techniques.includes('意译')).slice(0, 3)
      const merged = [...direct, ...free]
      if (this.filterTechnique) {
        return merged.filter(s => s.analysis.techniques.includes(this.filterTechnique))
      }
      return merged
    },
    techniqueStats () {
      const stat = { '直译': 0, '意译': 0 }
      this.allSentences.forEach(s => {
        s.analysis.techniques.forEach(t => {
          if (stat[t] !== undefined) stat[t]++
        })
      })
      return stat
    },
    syntaxStats () {
      const countMap = {}
      this.allSentences.forEach(s => {
        s.analysis.syntax.english.forEach(struct => {
          countMap[struct] = (countMap[struct] || 0) + 1
        })
      })
      return Object.entries(countMap)
          .sort((a, b) => b[1] - a[1])
          .slice(0, 6) // 前六种结构
          .map(([name, value]) => ({ name, value }))
    }
  },
  mounted () {
    axios.get('/api/word/GetTranslationOutput')
        .then(res => {
          if (res.data.code === 200) {
            this.rawData = res.data.data
            this.drawChart()
          } else {
            console.error('数据获取失败:', res.data.msg)
          }
        })
        .catch(err => {
          console.error('请求出错:', err)
        })
  },
  methods: {
    drawChart () {
      const chart = echarts.init(this.$refs.chart)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        title: [
          {
            text: '英文句子语法结构分布',
            left: '10%',
            textStyle: {
              color: '#e3e3e3'
            }
          },
          {
            text: '翻译策略分布',
            left: '65%',
            textStyle: {
              color: '#e3e3e3'
            }
          }
        ],

        grid: {
          left: '5%',
          right: '55%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.syntaxStats.map(item => item.name),
          axisLabel: {
            interval: 0,
            rotate: 30,
            color:'#e3e3e3'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color:'#e3e3e3'
          }
        },
        series: [
          {
            name: '英文语法结构',
            type: 'bar',
            data: this.syntaxStats.map(item => item.value),
            barWidth: '40%',
            itemStyle: {
              color: '#797da6'
            }
          },
          {
            name: '翻译策略',
            type: 'pie',
            radius: '50%',
            center: ['80%', '50%'],
            data: Object.entries(this.techniqueStats).map(([k, v]) => ({
              name: k,
              value: v,
              itemStyle: {
                color: k === '直译' ? '#9599ca' : '#c6c493'  // 自定义颜色：绿色和红色
              }
            })),
            label: {
              formatter: '{b}: {c} ({d}%)'
            }
          }

        ]
      }
      chart.setOption(option)
    }
  },
  watch: {
    filterTechnique () {
      this.$nextTick(() => this.drawChart())
    }
  }
}
</script>

<style >
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 12px 16px;
  border-radius: 6px;
  width: calc(50% - 16px);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
}
select {
  color: #dadfe6; /* 设置默认文本颜色 */
}
option {
  color: #333; /* 设置选项文本颜色 */
  background-color: #fff; /* 设置背景色 */
}
</style>
